<template>

	<view class="container">
		<view class="sort-box" >
			<view class="img-box">
				<image class="img" src="/static/logo/logo.webp"></image>
			</view>
			<view class="info-box">
				<view class="name">
					麻辣香锅
				</view>
				<view class="score-box">
					<text class="score">4.9分</text>
					<text class="sale">月售500</text>
				</view>
				<view class="distance">
					<view class="price">
						起送￥17 配送￥3
					</view>
					<view class="time">
						10分钟 | 500m
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="sort-box">
			<view class="img-box">
				<image class="img" src="../../static/logo/logo.webp" mode=""></image>
			</view>
			<view class="info-box">
				<view class="name">
					麻辣香锅
				</view>
				<view class="score-box">
					<text class="score">4.9分</text>
					<text class="sale">月售500</text>
				</view>
				<view class="distance">
					<view class="price">
						起送￥17 配送￥3
					</view>
					<view class="time">
						10分钟 | 500m
					</view>
				</view>
			</view>
		</view>
		<view class="sort-box">
			<view class="img-box">
				<image class="img" src="../../static/logo/logo.webp" mode=""></image>
			</view>
			<view class="info-box">
				<view class="name">
					麻辣香锅
				</view>
				<view class="score-box">
					<text class="score">4.9分</text>
					<text class="sale">月售500</text>
				</view>
				<view class="distance">
					<view class="price">
						起送￥17 配送￥3
					</view>
					<view class="time">
						10分钟 | 500m
					</view>
				</view>
			</view>
		</view>
		<view class="sort-box">
			<view class="img-box">
				<image class="img" src="../../static/logo/logo.webp" mode=""></image>
			</view>
			<view class="info-box">
				<view class="name">
					麻辣香锅
				</view>
				<view class="score-box">
					<text class="score">4.9分</text>
					<text class="sale">月售500</text>
				</view>
				<view class="distance">
					<text class="price">
						起送￥17 配送￥3
					</text>
					<text class="time">
						10分钟 | 500m
					</text>
				</view>
			</view>
		</view>
		<view class="sort-box">
			<view class="img-box">
				<image class="img" src="../../static/logo/logo.webp" mode=""></image>
			</view>
			<view class="info-box">
				<view class="name">
					麻辣香锅
				</view>
				<view class="score-box">
					<text class="score">4.9分</text>
					<text class="sale">月售500</text>
				</view>
				<view class="distance">
					<text class="price">
						起送￥17 配送￥3
					</text>
					<text class="time">
						10分钟 | 500m
					</text>
				</view>
			</view>
		</view>
		<view class="sort-box">
			<view class="img-box">
				<image class="img" src="../../static/logo/logo.webp" mode=""></image>
			</view>
			<view class="info-box">
				<view class="name">
					麻辣香锅
				</view>
				<view class="score-box">
					<text class="score">4.9分</text>
					<text class="sale">月售500</text>
				</view>
				<view class="distance">
					<text class="price">
						起送￥17 配送￥3
					</text>
					<text class="time">
						10分钟 | 500m
					</text>
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	import {reqSynthesis} from '@/common/api.js'
	
	export default {
		
		name: "mySort",
		data() {
			return {
				// 综合排序
				synthesisList: [],
			}
		},
		methods: {
			// 综合排序
			async synthesis() {
				const res = await reqSynthesis()
				console.log(res);
				// if (res.code == 200) {
				// 	this.synthesisList = res.data
				// }
			}
		},
		onLoad() {
			this.synthesis()
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		margin-top: 350px;
		padding: 0 12px;
	}

	.sort-box {
		margin: 20px 0;
		display: flex;
		height: 70px;
		width: 100%;
	}

	.img-box {
		width: 65px;
		height: 65px;
		border-radius: 10px;
		overflow: hidden;
		margin-right: 5px;

		.img {
			width: 100%;
			height: 100%;
		}
	}

	.info-box {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		width: 80%;

		.name {
			font-size: 20px;
		}

		.score-box {
			.score {
				color: #2588FF;
				margin-right: 15px;
			}

			.sale {
				color: #9098A0;
			}
		}

		.distance {
			display: flex;
			justify-content: space-between;
			color: #9098A0;
		}
	}
</style>
